<template>
  <div class="search-bar">
    <div class="select-date">
      <div class="item start">
        <div class="name">住</div>
        <div class="date">{{ startDateStr }}</div>
      </div>
      <div class="item end">
        <div class="name">离</div>
        <div class="date">{{ endDateStr }}</div>
      </div>
    </div>
    <div class="content" @click="handleSearchClick">
      <span class="keyword">关键字/位置/民宿</span>
    </div>
    <div class="right">
      <i></i>
    </div>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  import { storeToRefs } from 'pinia'

  import useMainStore from '@/stores/modules/main'

  import { formatMonthDay } from '@/utils/format_date'

  const mainStore = useMainStore()
  const { startDate, endDate } = storeToRefs(mainStore)

  const startDateStr = computed(() => formatMonthDay(startDate.value, "MM.DD"))
  const endDateStr = computed(() => formatMonthDay(endDate.value, "MM.DD"))

  defineEmits(["searchClick"])

  const handleSearchClick = () => {
    emit("searchClick")
  }
</script>

<style lang="less" scoped>
.search-bar {
  display: flex;
  align-items: center;
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
  font-size: 14px;
  color: #999;
  border-radius: 6px;
  background-color: #f2f4f6;

  .select-date {
    display: flex;
    flex-direction: column;
    border-right: solid 1px #fff;

    .item {
      display: flex;
      align-items: center;
      font-size: 12px;
      line-height: normal;

      .date {
        position: relative;
        color: #333;
        margin: 0 10px 0 3px;
      }
    }

    .end .date::after {
      content: " ";
      width: 0;
      height: 0;
      border: 4px solid #666;
      border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #666;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      bottom: 0px;
      right: -12px;
    }
  }

  .content {
    flex: 1;
    padding: 0 6px;
  }

  .right {
    display: flex;
    align-items: center;

    i {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-position: -29px -151px;
      background-size: 207px 192px;
      background-image: url(../../assets/img/home/home-sprite.png);
    }
  }
}
</style>
